/*
 * @Description: 查看申请弹窗
 * @Author: Rfan
 * @Date: 2022-02-24 16:16:12
 * @LastEditTime: 2023-02-28 11:04:12
 */

import { useEffect, useState } from 'react';
import { Button, Descriptions, Form, Input, Modal, Select, Table } from 'antd';
import classNames from 'classnames/bind';
import dayjs from 'dayjs';
import type { FC } from 'react';
import { useFormatMessage } from '@/utils/intlHelpers';
import { useApproveContext } from '../../../contexts/ApproveContext';

import styles from './styles/index.module.scss';
import { EnumApproveDialogTypes } from '@/view/use/Approve/dictionaries';
import { appState } from '@/store/mobx';

const cx = classNames.bind(styles);
const { Column } = Table;
const { Option } = Select;

const ApproveDialog: FC = () => {
  const formatMessage = useFormatMessage();
  const { approveDialog, hideApproveDialog, submitApproveFunc } = useApproveContext();
  const { visible, data } = approveDialog;
  const applyForm = data?.applyForm || {};
  const archiveItemList = data?.archiveItemList || [];
  const [form] = Form.useForm();
  const [isApprove, setIsApprove] = useState(false);
  const [submitState, setSubmitState] = useState<number>(0);

  useEffect(() => {
    if (visible) {
      setIsApprove(approveDialog.type === EnumApproveDialogTypes.Approve);
    }
  }, [visible]);

  // 提交表单
  const submitFunc = (state: number) => {
    console.log('submit');
    setSubmitState(state);
    form.submit();
  };

  /**
   * @description: 审批通过
   */
  const submitAgree = () => {
    submitFunc(1);
  };

  /**
   * @description: 审批拒绝
   */
  const submitDisagree = () => {
    submitFunc(2);
  };

  const handleFinished = (values: any) => {
    const param = {
      ...values,
      id: data.taskId,
      processInstanceId: data.processInstanceId,
      userId: appState.userInfo.id,
      param: {
        result: submitState === 1
      }
    };
    submitApproveFunc(param);
  };

  const onCancel = () => {
    hideApproveDialog();
  };

  return (
    <Modal
      title="利用审批"
      visible={visible}
      width={800}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          关闭
        </Button>,
        isApprove && (
          <Button key="back" onClick={submitDisagree}>
            退回
          </Button>
        ),
        isApprove && <Button key="assistance">协助</Button>,
        isApprove && <Button key="change">改派</Button>,
        isApprove && <Button key="block">作废</Button>,
        isApprove && (
          <Button key="submit" type="primary" onClick={submitAgree}>
            同意
          </Button>
        )
      ]}
    >
      <div className={cx('info')}>
        <Descriptions title="利用申请信息" size="middle">
          <Descriptions.Item label="申请日期">
            {dayjs(applyForm.applyTime).format('YYYY-MM-DD HH:mm:ss')}
          </Descriptions.Item>
          <Descriptions.Item label="申请人" span={2}>
            {applyForm.proposer}
          </Descriptions.Item>
          <Descriptions.Item label="申请类型">{applyForm.useTypeEntity}</Descriptions.Item>
          <Descriptions.Item label="利用目的">{applyForm.purpose}</Descriptions.Item>
          <Descriptions.Item label="利用天数">{applyForm.useDay}</Descriptions.Item>
          <Descriptions.Item label="利用说明">{applyForm.description}</Descriptions.Item>
        </Descriptions>
      </div>
      <div className={cx('list')}>
        <h6>审批利用列表</h6>
        <Table dataSource={archiveItemList} rowKey="id" size="small" bordered>
          <Column title="序号" dataIndex="id" key="id" align="center" />
          <Column title="档号" dataIndex="archiveNo" key="archiveNo" align="center" />
          <Column title="档号题名" dataIndex="title" key="title" align="center" />
          <Column
            title="档案类型"
            dataIndex="archiveTypeName"
            key="archiveTypeName"
            align="center"
          />
          <Column title="所属部门" dataIndex="departmentName" key="departmentName" align="center" />
          <Column title="电子利用" dataIndex="name" key="name" align="center" />
          <Column title="天数" dataIndex="name" key="name" align="center" />
          <Column title="审批执行" dataIndex="name" key="name" align="center" />
          <Column
            title={formatMessage('tableAction')}
            key="action"
            align="center"
            render={(_text, _record: any) => (
              <Select>
                <Option value={1}>同意</Option>
                <Option value={0}>不同意</Option>
              </Select>
            )}
          />
        </Table>
      </div>
      {isApprove && (
        <div className={cx('result')}>
          <Form form={form} colon={false} onFinish={handleFinished}>
            <Form.Item name="comment" label="审批意见">
              <Input.TextArea rows={3} />
            </Form.Item>
          </Form>
        </div>
      )}
    </Modal>
  );
};

export default ApproveDialog;
